<template>
  <div style="display: flex;flex-direction: column;width: 50%;height: 100%;">
    <el-card class="box-card" style="display: flex;height: 47%">
      <div style="display: flex;padding-bottom: 10px;align-items: center">
        <el-avatar :size="200" :src="Data.showData.avatar"/>
        <div style="margin-left: 40px">
          <p style="font-size: 35px">{{ Data.showData.username }}</p>
          <p style="color: #a3a3a4">{{ Data.showData.fullName }}</p>
          <p style="color: #a3a3a4" v-if="Data.showData.roles === 'Zuser'">招标业务进行中</p>
          <p style="color: #a3a3a4" v-else-if="Data.showData.roles === 'Tuser'">投标业务进行中</p>
          <p style="color: #a3a3a4" v-else>{{ Data.showData.descriptions }}</p>
          <div>
            <p style="display: flex;justify-content: flex-start;color: #a3a3a4">本次登录时间: <span style="margin-left: 15px">{{
                Data.showData.lastLoginTime
              }}</span>
            </p>
          </div>
        </div>
      </div>
    </el-card>

    <el-card style="height: 50%;margin-top: 3%">
      <div style="width: 100%;height: 300px;" id="bar"></div>
    </el-card>
  </div>

  <div style="display: flex;flex-direction: column;width: 48%;margin-left: 1%;height: 100%;">
    <el-card style="height: 100%;">
      <div style="width: 100%;height: 300px;" id="pie"></div>
    </el-card>
  </div>

  <el-dialog v-model="Data.centerDialogVisible" title="提示" width="600" center style="margin-top: 200px">
    <span>
      为了您的账户安全，请在 <a href="/setting">设置</a> 页面填写您的邮箱，以便您密码丢失后能找回账户密码
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="Data.centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="Data.centerDialogVisible = false;router.push('/setting')">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<style scoped>

</style>


<script setup>
import {onMounted, reactive} from "vue";
import * as echarts from 'echarts';
import request from "@/utils/request.js";
import {useRouter} from "vue-router";

const router = useRouter();

const dataString = localStorage.getItem('data');
// 通过JSON.parse转换字符串为对象
const data = dataString ? JSON.parse(dataString) : null;
console.log(data)

const Data = reactive({
  centerDialogVisible: false,
  showData: {},
})

const option = {
  title: {
    text: '系统角色划分',
    subtext: '划分详情',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '人数',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
    }
  ]
};


const barOption = {
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar',
      // 在此配置label 显示
      label: {
        show: true, // 显示标签
        position: 'top', // 标签的位置, 'top'是在柱子上方
        // 可以通过formatter定制标签显示格式
        formatter: '{c}' // {c}表示数据值
      },
    }
  ]
};

const LoadCategory = async () => {
  try {
    const res = await request.get(`/java/file/getFileTypeCount?userId=` + data.userId);

    // 初始文件类型统计，将docx和doc归入Word，jpg和png归入图片，其他归入其他
    const fileTypeStatsBar = {
      'doc': 0,
      'docx': 0,
      'jpg': 0,
      'png': 0,
      'jpeg': 0,
      'jif': 0,
      'jpe': 0,
      'svg': 0,
      'ico': 0
    };

    const fileTypeStats = {
      '文件夹': 0,
      'PDF': 0,
      'Word': 0,
      '图片': 0,
      '其他': 0
    };

    for (let item of res.data) {
      // 转换count，以确保它是整数
      const count = parseInt(item.count) || 0;

      if (item.fileType === 'folder') {
        fileTypeStats['文件夹'] += count;
      } else if (item.fileType === 'pdf') {
        fileTypeStats['PDF'] += count;
      } else if (['doc', 'docx', 'jpg', 'png', 'jpeg', 'jif', 'jpe', 'svg', 'ico'].includes(item.fileType)) {
        fileTypeStatsBar[item.fileType] += count;
      } else {
        fileTypeStats['其他'] += count;
      }
    }

// 最后，确保将doc和docx合并为Word，将图片相关类型合并为图片
    fileTypeStats['Word'] = fileTypeStatsBar['doc'] + fileTypeStatsBar['docx'];
    fileTypeStats['图片'] =
        fileTypeStatsBar['jpg'] +
        fileTypeStatsBar['png'] +
        fileTypeStatsBar['jpeg'] +
        fileTypeStatsBar['jif'] +
        fileTypeStatsBar['jpe'] +
        fileTypeStatsBar['svg'] +
        fileTypeStatsBar['ico'];


    // 提取分类和数量用于图表
    const categories = Object.keys(fileTypeStats);
    const countsData = Object.values(fileTypeStats);

    // 更新柱状图选项
    barOption.xAxis.data = categories;
    barOption.series[0].data = countsData;

    // 获取 ECharts 容器 DOM
    let chartDom = document.getElementById('bar');
    let myChart = echarts.init(chartDom);
    // 使用新的数据设置图表选项
    myChart.setOption(barOption);

  } catch (error) {
    console.error("获取数据列表错误: ", error);
    // 这里可以添加错误处理逻辑
  }
}


const LoadRoles = async () => {
  try {
    const res = await request.get(`/user/roles/countUserRoles`);
    console.log(res.data);
    // 遍历res.data并更新option.series.data
    const seriesData = res.data.map(item => {
      return {value: item.userCount, name: item.description};
    });

    // 如果seriesData不为空，就设置option.series[0].data，否则保留原始数据
    if (seriesData.length) {
      option.series[0].data = seriesData;
    }

    // 获取 ECharts 容器 DOM
    let chartDom = document.getElementById('pie');
    let myChart = echarts.init(chartDom);
    // 使用新的数据设置图表选项
    myChart.setOption(option);

  } catch (error) {
    console.error("获取角色列表错误: ", error);
    // 可以添加错误处理逻辑
  }
};


onMounted(() => {
  LoadRoles();
  LoadCategory();
});

const tip = () => {
  request.get(`/user/getUserRolesDetailByUsername?username=${data.username}`).then((res) => {
    console.log("打印打印打印", res)
    Data.showData = res;
    console.log("获取数据：", res);
    if (res.email === "" || res.email === null) {
      Data.centerDialogVisible = true
    }
  });

}

tip();

</script>

